<template>
    <view class="content">
        <view class="box">
            <view class="item" v-for="(item, index) in data.goods_list" :key="index" @click="chooseGoods(item)">
                <image :src="item.isSelect ? '../../static/icon/g_choose.png' : '../../static/icon/g_choose2.png'" class="choose"></image>
                <image :src="item.image_uri" class="goods-img" mode="aspectFit"></image>
                <view>
                    <view class="name">{{item.goods_name}}</view>
                    <view class="down">
                        <view class="price">￥<text class="price-num">{{item.sale_price}}</text></view>
                        <view>x{{item.goods_nums}}</view>
                    </view>
                </view>
            </view>
            <view class="total">
                <!-- 共{{data.goods_count}}件商品 -->
                实付款：<text>￥</text><text class="total-num">{{data.pay_amount}}</text>
            </view>
        </view>
        <view class="box padding-tb-lr">
            <view class="title">申请售后原因</view>
            <view class="list" v-for="(item, index) in list" :key="index" @click="choose(item)">
                <image :src="item.isCheck ? '../../static/icon/g_choose.png' : '../../static/icon/g_choose2.png'" class="choose"></image>
                <view>{{item.title}}</view>
            </view>
        </view>
        <view class="box padding-tb-lr">
            <view class="u-p-b-15">备注</view>
            <textarea v-model="content" placeholder="请输入您想要备注的内容" class="t-inp"></textarea>
        </view>
        
        <view class="btn" @click="$noMultipleClicks(doSubmit)">确认</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                noClick:true,
                data: {},
                id: '',
                list: [],
                content: '',
            };
        },
        onLoad(option) {
            this.id = option.id
            this.getData()
            this.getList()
        },
        methods: {
            doSubmit() {
                var ogid = [], gnum = []
                this.data.goods_list.forEach(el => {
                    if (el.isSelect) {
                        ogid.push(el.id)
                        gnum.push(el.goods_nums)
                    }
                })
                if (ogid.length == 0) {
                    this.$toast('请选择申请售后的商品！');
                    return
                }
                
                var um = ''
                this.list.forEach(ii => {
                    if (ii.isCheck) {
                        um = ii.title
                    }
                })
                if (!um) {
                    this.$toast('请选择申请售后原因！');
                    return
                }
                
                this.$ajax('refund', {
                	userToken: this.$getSync('userToken'),
                    order_id: this.id,
                    order_goods_ids: ogid.join(','),
                    goods_number: gnum.join(','),//退货数量
                    r_type: 2,//申请退款类型：1申请退款，2申请退款退货
                    user_message: this.content,//备注
                    apply_txt: um,//申请退款理由
                }).then(ret => {
                	if (ret.status == 0) {
                        this.$toast('提交成功');
                        setTimeout(() => {
                            this.$backT()
                        }, 500)
                	} else {
                		this.$toast(ret.message);
                	}
                });
            },
            
            // 选择售后商品
            chooseGoods(item) {
                item.isSelect = !item.isSelect
            },
            
            // 选择售后原因
            choose(item) {
                const nowStatu = item.isCheck;
                this.list.forEach(ii => {
                    ii.isCheck = false;
                })
                item.isCheck =! nowStatu
            },
            
            getData(){
            	this.$ajax('order_detail', {
            		userToken: this.$getSync('userToken'),
            		id: this.id,
            	}).then(ret => {
            		if (ret.status == 0) {
                        this.data = ret.data
                        this.data.goods_list.forEach(cur => {
                            this.$set(cur, 'isSelect', false)
                        })
                        // console.log(this.data.goods_list)
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
            
            // 获取售后原因
            getList() {
            	this.$ajax('refundReason', {
            		userToken: this.$getSync('userToken'),
            	}).then(ret => {
            		if (ret.status == 0) {
                        if (ret.data.length > 0) {
                            ret.data.forEach(item => {
                                this.list.push({
                                    title: item,
                                    isCheck: false
                                })
                            })
                        }
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    .t-inp{
        width: 100%;
    }
    
    page{
        background-color: #f5f5f5;
        border-top: 2rpx solid #e6e6e6;
    }
    .box{
        padding-bottom: 20rpx;
        background-color: #fff;
        margin-bottom: 20rpx;
    }
    .padding-tb-lr{
        padding: 40rpx 20rpx 20rpx;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        position: relative;
    }
    .active{
        background: rgba(0, 0, 0, .2);
    }
    .choose{
        width: 31rpx;
        height: 31rpx;
        margin-right: 20rpx;
    }
    .goods-img{
        width: 160rpx;
        height: 160rpx;
        border: 2rpx solid #e3e3e3;
        border-radius: 15rpx;
        overflow: hidden;
        margin-right: 15rpx;
    }
    .name{
        width: 475rpx;
        font-size: 28rpx;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sub{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24rpx;
        color: #929292;
        padding-top: 8rpx;
    }
    .down{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 30rpx;
    }
    .price{
        font-size: 23rpx;
    }
    .price-num{
        font-size: 32rpx;
        font-weight: bold;
    }
    .total{
        padding-right: 20rpx;
        text-align: right;
        font-size: 24rpx;
    }
    .total>text{
        color: #f62a2a;
    }
    .total-num{
        font-size: 38rpx;
        font-weight: bold;
    }
    
    .title{
        font-size: 30rpx;
        font-weight: bold;
        padding-bottom: 30rpx;
        border-bottom: 2rpx solid #e6e6e6;
    }
    .list{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 30rpx;
    }
    .list>view{
        flex: 1;
    }
    
    
    .pz{
        font-size: 28rpx;
        padding-bottom: 5rpx;
    }
    .pz-sub{
        font-size: 24rpx;
        padding-bottom: 20rpx;
    }
    .img-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .img{
        position: relative;
        margin-right: 15rpx;
        margin-bottom: 15rpx;
    }
    .img>image{
        width: 149rpx;
        height: 145rpx;
    }
    .del{
        font-size: 20rpx;
        color: #fff;
        background: rgba(0, 0, 0, .5);
        padding: 5rpx 10rpx;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    .photo{
        width: 149rpx;
        height: 145rpx;
        margin-right: 15rpx;
        margin-bottom: 15rpx;
    }
    
    .btn {
        font-size: 34rpx;
    	margin: 50rpx 30rpx;
    	padding: 25rpx;
    	background: #00734c;
    	border-radius: 50rpx;
    	color: #FFFFFF;
    	text-align: center;
    }

</style>
